<template>
    <mapBase2D></mapBase2D>

  <div class="absolute right-0px flex justify-between top-56px" :style="{
    width: mapStores.mapType.includes('layer') || mapStores.mapType.includes('plane') ? '280px' : '0px',
    height:'95%',
    top: '0',
    maxHeight: '95%',
  }">
    <div class="functionalArea overflow-hidden w100%">
      <div v-if="mapStores.mapType.includes('layer') || mapStores.mapType.includes('plane')"
        class="flex flex-col h-100%">
        <div class="ctTitle" :class="{ 'layer-title': isLayerType, 'function-title': !isLayerType }">
          <div class="flex items-center">
            <svg-icon :name="isLayerType ? 'wmc-coverage_unactive' : 'wmc-fun_active'"
              :color="'#1E55CC'"></svg-icon>
            <span class="ml6px font-size-16px">
              {{ isLayerType ? '图层' : '功能区' }}
            </span>
          </div>
          <svg-icon name="wmc-dialog_close" class="cursor-pointer" @click="handleClose"></svg-icon>
        </div>
        <div v-if="!isLayerType" class="content overflow-y-auto">
          <slot name="function-content" />
        </div>
        <div v-else class="content overflow-y-auto">
          <slot name="layer-content" />
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import mapStore from "@/stores/modules/map.ts";
import { useRoute } from "vue-router";
import { computed } from "vue";

const mapStores = mapStore()
const route = useRoute()

const isLayerType = computed(() => mapStores.mapType.includes('plane'))

const showTimeAxis = computed(() => {
  let fullScreenMenu = ['/home/index']
  return fullScreenMenu.includes(route.path)
})

const handleClose = () => {
  mapStores.setMapType([])
}
</script>

<style lang="scss" scoped>
.functionalArea {
  background: #ffffff94;
  box-shadow: -1px 0px 8px 0px rgba(0, 0, 0, 0.25);
  transition: width .2s ease-out;
  overflow-y: hidden;

  .content {
    flex: 1;
    padding: 8px;
    box-sizing: border-box;

    &.layer-content {
      background-color: rgba(255, 255, 255, 0.9);
    }

    &.function-content {
      background-color: rgba(255, 255, 255, 0.85);
    }
  }
}

.ctTitle {
  font-size: 16px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  background: url(@/assets/images/Rectangle.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.layer-title {
    border-bottom: 2px solid #e6e6e6;
  }

  span {
    color: #4B4B4B;
  }
}
</style>
